<template>
  <div>
    <el-button plain @click="visible = true">{{ `选择${typeText}` }}</el-button>
    <div v-if="type === 1" class="select-view">
      <edu-image :src="fileurl" class="img" fit="cover"></edu-image>
    </div>
    <template v-else>
      <div class="select-view file" v-if="checkedFileId">
        <div class="left">
          <el-image :src="typeIconImg"></el-image>
        </div>
        <div class="right">
          <div class="title">{{ materialFilename }}</div>
          <!-- <div class="text">{{ checkedFile.filesize }}</div> -->
        </div>
      </div>
    </template>
    <el-dialog
      :title="`选择${typeText}`"
      :visible.sync="visible"
      width="900px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <Material :value.sync="value" :type="type" @change="changeMaterial" v-if="visible"></Material>
      <div slot="footer" class="select-footer">
        <el-button size="mini" @click="handleClose">取消</el-button>
        <el-button type="primary" size="mini" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Material from './components/material'
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 0
    },
    field: {
      type: String,
      default: ''
    },
    filename: {
      type: String,
      default: ''
    }
  },
  components: {
    Material
  },
  data() {
    return {
      visible: false,
      fileurl: this.field,
      show: false,
      materialFilename: this.filename,
      checkedFileId: this.value
    }
  },
  watch: {
    field(val) {
      this.fileurl = val
    },
    filename(val) {
      this.materialFilename = val
    },
    value(val) {
      this.checkedFileId = val
    }
  },
  computed: {
    typeText() {
      const text = {
        1: '图片',
        2: '音频',
        3: '视频',
        4: '文档'
      }
      return text[this.type]
    },
    typeIconImg() {
      const url = {
        2: require('@/assets/images/material/audio.png'),
        3: require('@/assets/images/material/video.png'),
        4: require('@/assets/images/material/wenjian.png')
      }
      return url[this.type]
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    changeMaterial(data) {
      this.$emit('update:value', data.id)
      this.materialFilename = data.filename
      this.fileurl = data.url
    },
    onSubmit() {
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
}
.select-view {
  margin-top: 20px;
  display: flex;
  &.file {
    width: 400px;
    line-height: 1;
    border: 1px solid #e4e7ed;
    padding: 15px;
  }
  .img {
    min-width: 200px;
    min-height: 200px;
    max-width: 50%;
  }
  .left {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfe6;
    .el-image {
      width: 24px;
      height: 28px;
    }
  }
  .right {
    flex: 1;
    margin-left: 10px;
    .title {
      width: 300px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-import;
      @include ellipsis();
    }
    .text {
      margin-top: 25px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
    }
  }
}
.select-footer {
  display: flex;
  justify-content: center;
}
</style>
